<html>
<head>
	<meta charset="UTF-8"> 
	<style type="text/css">
		#myCanvas{
			border: 1px solid #ccc;
		}
	</style>

	<script type="text/javascript">
		function init(){

			// 2.获取画布对象
			var canvas = document.getElementById("myCanvas");
			// 3.获取绘图设备
			var ctx = canvas.getContext("2d");

			// 4.在画布上定义绘制元素
			ctx.beginPath();
			ctx.arc(200,200,		//圆中心坐标
					100,			//圆半径
					0,Math.PI*2,	//圆弧起始角度和终止角度
					true);			//圆弧方向：逆时针(true)，顺时针(true)

			// 5.设置样式，绘制圆
			ctx.save();
			// 设置填充样式
			ctx.fillStyle = 'rgba(255,0,0,128)';			
			ctx.fill();
			ctx.strokeStyle = '#000000';
			//ctx.lineWidth = 30.0;
			ctx.stroke();
			ctx.restore();
		}
	</script>

    <title>Canvas 绘图</title>
</head>

<body onload=init();>
	<!-- 1.定义Canvas元素-->
	<canvas id="myCanvas" width="400" height="400"></canvas>

</body>
</html>


